今日持續探討 DataTable 相關功能：

frozen

frozen 為凍結視窗，可分別應用在 row 及 column 上。

Row Frozen

若將特定 row 凍結在最上方，需要在 <DataTable> 上加上 frozenValue 的屬性。
frozenValue 為一個陣列值，裡面可擺放多組物件，每個物件即為要凍結的資料。
其中，已經放到 frozenValue 內的資料，不需再放到列表的資料內，不然會重複顯示。

const products1 = ref([
  // {  不用納入要被凍結的資料
  //   code: '001',
  //   name: 'Watch',
  //   category: 'Accessories',
  //   quantity: 20
  // },
  {
    code: '002',
    name: 'T-Shirt',
    category: 'Clothing',
    quantity: 25
  },
  {
    code: '003',
    name: 'Skirt',
    category: 'Clothing',
    quantity: 20
  },
  {
    code: '005',
    name: 'Earrings',
    category: 'Accessories',
    quantity: 35
  }
]);
// 要凍結的資料
const lockedCustomers = ref([
  {
    code: '001',
    name: 'T-Shirt',
    category: 'Clothing',
    quantity: 25
  }
]);

<DataTable
    :value="products1"
    scrollable
    scrollHeight="180px"
    :frozenValue="lockedCustomers"
    tableStyle="min-width: 50rem"
    paginator
    :rows="5"
>
    <Column header="代碼" field="code"></Column>
    <Column header="名稱" field="name"></Column>
    <Column header="種類" field="category"></Column>
    <Column header="數量" field="quantity">
      <template #body="slotProps"> {{ slotProps.data.quantity }} 件 </template>
    </Column>
</DataTable>

Column Frozen

若是要凍結 column 欄位，可直接在 <Column> 上加上 frozen 屬性，當表格過長需要橫向捲動時，被凍結的欄位會固定在最左側。

<DataTable :value="products2" scrollable dataKey="code">
    <!-- 加上 frozen -->
    <Column field="code" header="代碼" style="min-width: 200px" frozen></Column>
    <!-- 加上 frozen -->
    <Column field="name" header="名稱" style="min-width: 100px" frozen></Column>
    <Column field="category" header="種類" style="min-width: 100px"></Column>
    ...<!-- 很多欄位 -->
    <Column field="quantity" header="數量" style="min-width: 100px"></Column>
</DataTable>

另外，在實作上發現若在其中一欄位加上按鈕，在經過凍結視窗時，按鈕的層級(z-index)會大於凍結視窗的，會覆蓋在凍結視窗的欄位上。

此時，在按鈕上加上 position static 屬性可以解決。

<Column header="操作" style="min-width: 100px">
  <template #body>
    <Button label="檢視" class="static"></Button>
  </template>
</Column>

或是利用 pt 加上 position static。

<Column header="操作" style="min-width: 100px">
  <template #body>
    <Button
      label="檢視"
      :pt="{
        root: { style: { position: 'static' } }
      }"
    ></Button>
  </template>
</Column>

thead 文字置中

最後記錄下 thead 上的文字置中，試過多種偏門方式一直無法讓標題文字成功置中，最後還是得靠 pass through 方法達成，在文件中有個 columnHeaderContent 的 pt 屬性，加上 justify-center 就可以達到了。

<Column
  field="code"
  header="代碼"
  :pt="{ columnHeaderContent: 'justify-center' }"
  style="min-width: 200px"
  frozen
></Column>

參考連結：

1. https://primevue.org/datatable
2. https://github.com/primefaces/primevue/issues/4898